<template>
  <!-- 登录页面不显示导航栏 -->
  <router-view v-if="route.path === '/login'" />
  
  <!-- 其他页面显示完整布局 -->
  <el-container v-else style="height: 100vh">
    <el-aside width="200px">
      <el-menu :default-active="activeMenu" router>
        <el-menu-item index="/users">用户管理</el-menu-item>
        <el-menu-item index="/room-types">客房类型</el-menu-item>
        <el-menu-item index="/rooms">客房管理</el-menu-item>
        <el-menu-item index="/customers">客户管理</el-menu-item>
        <el-menu-item index="/check-ins">入住登记</el-menu-item>
        <el-menu-item index="/extensions">续住管理</el-menu-item>
        <el-menu-item index="/consumptions">消费管理</el-menu-item>
        <el-menu-item index="/settlements">结算管理</el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="display: flex; justify-content: space-between; align-items: center;">
        <span>酒店管理系统</span>
        <div>
          <span>欢迎，{{ userStore.userInfo.username || '用户' }}</span>
          <el-button type="text" @click="onLogout" style="margin-left: 10px; color: #fff;">退出登录</el-button>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from './store/user';
import { ElMessageBox } from 'element-plus';

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const activeMenu = ref(route.path);

const onLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', { type: 'warning' })
    .then(() => {
      userStore.logout();
      router.push('/login');
    });
};
</script>

<style>
body {
  margin: 0;
}
.el-header {
  background-color: #409eff;
  color: white;
  font-size: 18px;
  font-weight: bold;
}
</style> 